<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/layx.min.css" media="all">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <title>cliblan 示例</title>
</head>

<body>
    <div id="game"></div>
    <div class="layui-container" id="app" style="background-color: white">
        <div class="layui-row">
            <div class="layui-col-xs8">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>广播设置</legend>
                </fieldset>

                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户ID</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入" class="layui-input" readonly :value="player.uid">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">输入文字</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="请输入" class="layui-input" v-model="tinput">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">返回内容</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="返回内容" class="layui-input" readonly :value="toutput">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" id="send" onclick="return false;">发送</button>
                            <button type="reset" class="layui-btn layui-btn-primary" @click="clear" onclick="return false;">重置</button>
                        </div>
                    </div>
                </form>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>联机选项</legend>
                </fieldset>

                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">对方玩家ID</label>
                        <div class="layui-input-block">
                            <input type="text" placeholder="对方玩家ID" class="layui-input" readonly :value="player.enemy">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" @click="match" :class="{ 'layui-btn-normal': player.enemy.length === 0, 'layui-btn-disabled': player.enemy.length > 0 }">开始匹配</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/layx.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/vue.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        function detectWebGLContext() {
            // Create canvas element. The canvas is not added to the
            // document itself, so it is never displayed in the
            // browser window.
            var canvas = document.createElement("canvas");
            // Get WebGLRenderingContext from canvas element.
            var gl = canvas.getContext("webgl") ||
                canvas.getContext("experimental-webgl");
            // Report the result.
            if (gl && gl instanceof WebGLRenderingContext) {
                return true;
            } else {
                return false;
            }
        }
        (function() {
            if (detectWebGLContext()) {
                document.write('<script type="text/javascript" src="js/pixi-legacy.min.js" charset="utf-8"><' + '/script>');
            } else {
                document.write('<script type="text/javascript" src="js/pixi.min.js" charset="utf-8"><' + '/script>');
            }
        })();
        detectWebGLContext();
    </script>
    <script type="text/javascript" src="js/game.js" charset="utf-8"></script>
</body>

</html>